body,
html {
	height: 100%;
}
body {
	margin: 0 auto;
	max-width: 16rem;
	line-height: 1;
	&.Hide{
		overflow: hidden;
	}
}



.head {
	height: rem(150);
	background-color: $mainColor;
	padding: 0 rem($divPadding);

	.select {
		width: rem(150);
		height: rem(78);
		color: $white;
		position: relative;

		&-top {
			height: 100%;
			position: relative;

			p {
				font-size: rem(38);
			}

			i {
				display: flex;
				font-size: rem(26);
				margin-right: rem(24);
				@include transition();
				@include transform(0);
			}
			&.focus{
				i{
					@include transition();
					@include transform(180deg);
				}
			}
		}

		&-bot {
			position: absolute;
			top: rem(78);
			left: rem(-20);
			width: rem(150);
			background-color: $white;
			border-radius: rem(10);
			box-shadow: 0 rem(6) rem(24) 0 rgba(49, 49, 49, 0.14);
			padding: rem(20);
			display: none;

			li {
				font-size: rem(30);
				line-height: rem(48);

				a {
					color: $gray3;
					display: block;

					&:active {
						color: $mainColor;
					}
				}
			}
		}
	}

	.search {
		height: rem(78);
		background-color: $white;
		border-radius: rem(2);
		position: relative;

		input {
			height: 100%;
			width: 100%;
			border: none;
			font-size: rem(34);
			color: $gray3;
			padding-left: rem(78);
		}

		i {
			position: absolute;
			left: rem(28);
			top: 50%;
			transform: translateY(-50%);
			color: $gray9;
			font-size: rem(36);
		}
	}

	& > a {
		color: $white;
		margin: 0 rem(10) 0 rem(40);

		i {
			display: flex;
			font-size: rem(50);
		}
	}
}

.menu {
	padding: rem($divPadding) 0;
	overflow: hidden;

	ul {
		li {
			padding: rem(18) rem(20);

			a {
				color: $gray3;
				text-align: center;

				b {
					width: rem(92);
					height: rem(92);
					border-radius: rem(24);
					font-weight: 400;
					background-color: #46bd61;

					i {
						color: $white;
						font-size: rem(50);
					}
				}

				p {
					font-size: rem(28);
					line-height: rem(28);
					margin-top: rem(20);
				}
			}

			&:nth-child(2) {
				b {
					background-color: #679eff;
				}
			}

			&:nth-child(3) {
				b {
					background-color: #ffa145;
				}
			}

			&:nth-child(4) {
				b {
					background-color: #eb5a9f;
				}
			}

			&:nth-child(5) {
				b {
					background-color: #c771fb;
				}
			}

			&:nth-child(6) {
				b {
					background-color: #eda95a;
				}
			}

			&:nth-child(7) {
				b {
					background-color: #df4242;
				}
			}

			&:nth-child(8) {
				b {
					background-color: #5ab1eb;
				}
			}

			&:nth-child(9) {
				b {
					background-color: #67cc4f;
				}
			}

			&:nth-child(10) {
				b {
					background-color: #39c8b9;
				}
			}
		}
	}
}

.hot {
	margin: 0 rem($divPadding);
	padding-top: rem(30);

	span {
		width: rem(180);
		height: rem(82);
		margin-right: rem(28);

		.iconhot {
			font-size: rem(58);
			color: #df4242;
		}

		.iconredianjingxuan {
			font-size: rem(58);
			color: #df4242;
			margin-left: rem(18);
		}
	}

	p {
		font-size: rem(34);
		line-height: rem(50);
		max-height: rem(100);
		overflow: hidden;

		a {
			color: $gray3;

			&:active {
				color: $mainColor;
			}
		}
	}
}

.hot-list {
	padding: rem(24) rem(30) 0;

	li {
		p {
			font-size: rem(34);
			line-height: rem(50);

			a {
				color: $gray3;

				&:active {
					color: $mainColor;
				}
			}
		}

		span {
			font-size: rem(24);
			line-height: 1;
			padding: rem(16) 0 rem(40);
			display: block;
			color: $gray9;

			mark {
				background: none;
				color: $mainColor;
			}
		}
	}
}

.index-video {
	margin: 0 rem($divPadding);
	padding-top: rem(24);
	overflow: hidden;

	p {
		font-size: rem(38);
		line-height: rem(48);

		a {
			color: $gray3;

			&:active {
				color: $mainColor;
			}
		}
	}

	&__switch {
		padding: rem(20) 0 0;
		height: rem(606);
		overflow: hidden;

		.item {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: block;
		}

		.swiper-container {
			height: rem(576);
			position: relative;

			.swiper-wrapper {
				height: rem(570);

				.swiper-slide {
					text-align: center;
					font-size: 18px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					overflow: hidden;
					margin-bottom: rem(100);

					.s{
						.Txt{
							margin-top: rem(20);
							font-size: rem(38);
							line-height: rem(48);
							text-align: left;
							a{
								color: $gray3;
							}
						}
						.image{
							height: 0;
							padding-bottom: (390/690)*100%;
							display: block;
							overflow: hidden;
							position:relative;


							img {
								width: 100%;
								max-height: none;
								display: block;
							}
							.Notice{
								position:absolute;
								right: rem(20);
								top:rem(20);
								z-index: 9;
								line-height: rem(40);
								font-size: rem(26);
								padding: 0 rem(14);
								color: #fff;
								border-radius: rem(20);
								background-color: #55a1ff;
							}
							.Live{
								position:absolute;
								right: rem(20);
								top:rem(20);
								z-index: 9;
								line-height: rem(40);
								font-size: rem(26);
								padding: 0 rem(14);
								color: #fff;
								border-radius: rem(20);
								background-color: #ff474b;
							}
							.Replay{
								position:absolute;
								right: rem(20);
								top:rem(20);
								z-index: 9;
								line-height: rem(40);
								font-size: rem(26);
								padding: 0 rem(14);
								color: #fff;
								border-radius: rem(20);
								background-color: #ffa800;
							}
						}
						.txt {
							font-size: rem(26);
							color: $gray9;
							text-align: left;
							margin-top: rem(20);

							mark {
								background: none;
								color: $mainColor;
							}
						}
					}
				}
			}

			.swiper-pagination {
				right: 0;
				bottom: rem(30);
				height: rem(12);
				position: absolute;
				z-index: 8;
				text-align: right;

				span {
					margin: 0 rem(5);
					width: rem(12);
					height: rem(12);
					border-radius: rem(6);
					vertical-align: top;
					background-color: rgb(204,204,204);
					opacity: 1;
					@include transition();

					&.swiper-pagination-bullet-active {
						width: rem(32);
						background-color: rgb(90,179,0);
						opacity: 1;
					}
				}
			}


		}
	}
}

.index-title {
	height: rem(158);
	line-height: 1;
	padding: 0 rem(30);

	h2 {
		font-size: rem(50);
		color: $black;
	}

	& > a {
		color: $gray9;
		font-size: rem(32);

		i {
			font-size: rem(16);
			margin-left: rem(6);
		}
	}
}

.index-news {
	padding: 0 rem(30);

	ul {
		li {
			padding: rem(30) 0;

			.txt {

				p {
					font-size: rem(34);
					line-height: rem(52);
					max-height: rem(104);
					overflow: hidden;

					a {
						color: $gray3;

						&:active {
							color: $mainColor;
						}
					}
				}

				span {
					font-size: rem(24);
					color: $gray9;
					margin-top: rem(14);

					time {
						margin-left: rem(30);
					}
				}
			}

			.image {
				width: rem(224);
				margin-left: rem(20);

				a {
					padding-bottom: (150/224)*100%;
					height: 0;
					overflow: hidden;

					img {
						width: 100%;
						max-height: none;
					}
				}
			}
			.image3{
				padding:rem(20) 0 rem(26);
				.item{
					width: 31%;
					a{
						padding-bottom: (150/224)*100%;
						height: 0;
						overflow: hidden;

						img {
							width: 100%;
							max-height: none;
						}
					}
				}
			}
		}
	}

	& > a {
		display: block;
		background-color: $bgColor;
		font-size: rem(28);
		line-height: rem(80);
		text-align: center;
		color: $gray9;

		&:active {
			background-color: $mainColor;
			color: $white;
		}
	}
}

.engineering {
	background-color: $bgColor;
	padding: rem(55) rem(30) 0;

	h2 {
		font-size: rem(50);
	}

	ul {
		padding: rem(12) 0 0;
		overflow: hidden;

		li {
			margin: rem(24) 0 0;
			background-color: $white;
			border-radius: rem(6);
			padding: rem(26) rem(30) 0;

			a {
				color: $gray9;

				p {
					font-size: rem(38);
					line-height: rem(52);
					color: $gray3;
				}

				span {
					padding: rem(24) 0;

					b {
						font-size: rem(26);
						font-weight: 400;

						i {
							font-size: rem(26);
							margin-right: rem(6);
						}

						&.orange {
							color: $orange;
						}

						&.green {
							color: $green;
						}
					}
				}

				&:active {
					p {
						color: $mainColor;
					}
				}
			}
		}
	}

	.more {
		text-align: center;
		padding: rem(40) 0 rem(140);

		a {
			font-size: rem(26);
			color: $gray9;

			b {
				width: rem(26);
				height: rem(26);
				border: rem(2) solid $gray9;
				border-radius: 50%;
				margin-left: rem(8);

				i {
					font-size: rem(10);
					display: flex;
				}
			}
		}
	}
}

.menu__fix {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
	width: 100%;
	height: rem(100);
	background-color: $white;
	box-shadow: 0 rem(6) rem(24) 0 rgba(49, 49, 49, 0.14);

	ul {
		li {
			height: rem(100);

			a {
				color: $gray9;
				font-size: rem(20);
				text-align: center;

				i {
					font-size: rem(38);
					margin-bottom: rem(10);
					display: flex;
				}

				&.active {
					color: $mainColor;
				}
			}
		}
	}
}

.index-exhibition {
	padding: rem($divPadding) 0 rem($divPadding) rem($divPadding);

	&__switch {
		height: rem(390);
		overflow: hidden;

		.item {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;

			.title {
				position: absolute;
				top: rem(26);
				left: rem(26);
				z-index: 9;
				font-size: rem(32);
				color: $white;
				text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);

				b {
					width: rem(44);
					height: rem(44);
					border-radius: 50%;
					background-color: #f5493c;
					margin-right: rem(8);

					i {
						font-size: rem(22);
						color: $white;
						display: flex;
					}
				}
			}
		}

		.swiper-container {
			height: rem(390);
			position: relative;
			display: none;

			.swiper-wrapper {
				height: rem(390);

				.swiper-slide {
					text-align: center;
					font-size: 18px;
					display: -webkit-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					overflow: hidden;
					margin-bottom: rem(100);
					width: 90%;

					.exhi {
						height: 100%;
						width: 100%;
						position: relative;

						a {
							display: block;
							overflow: hidden;
							position: absolute;
							z-index: 99;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;

							img {
								width: 100%;
								max-height: none;
								display: block;
							}

							p {
								position: absolute;
								left: 0;
								bottom: rem(20);
								width: 100%;
								font-size: rem(34);
								line-height: rem(44);
								z-index: 9;
								padding: 0 rem(26);
								color: $white;
								text-align: left;
								text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);

								span {
									display: block;
									font-size: rem(26);
									margin-top: rem(10);
								}
							}

							&::after {
								content: '';
								position: absolute;
								top: 0;
								right: 0;
								bottom: 0;
								left: 0;
								z-index: 1;
								background-color: rgba(0,0,0,0.2);
							}
						}
					}
				}
			}

			.swiper-pagination {
				right: 0;
				bottom: rem(30);
				height: rem(12);
				position: absolute;
				z-index: 8;
				text-align: right;

				span {
					margin: 0 rem(5);
					width: rem(12);
					height: rem(12);
					border-radius: rem(6);
					vertical-align: top;
					background-color: rgb(204,204,204);
					opacity: 1;
					@include transition();

					&.swiper-pagination-bullet-active {
						width: rem(32);
						background-color: rgb(90,179,0);
						opacity: 1;
					}
				}
			}

			.txt {
				position: absolute;
				bottom: rem(25);
				left: 0;
				font-size: rem(26);
				color: $gray9;

				mark {
					background: none;
					color: $mainColor;
				}
			}
		}
	}
}
.pop{
	@extend %centerMiddle;
	width: 60%;
	background-color: $white;
	border-radius: rem(20);
	z-index: 9999;
	box-shadow: 0px 0px rem(24) 0px rgba(0, 0, 0, 0.16);
	padding:rem(62) rem(70) rem(54) rem(70);
	text-align: center;
	display: none;
	&>a{
		position:absolute;
		right: rem(24);
		top: rem(24);
		color: $gray6;
		display: flex;
		i{
			font-size: rem(22);
		}
	}
	img{
		width: rem(290);
	}
	b{
		font-size: rem(44);
		padding:rem(60) 0 rem(30);
		display: block;
	}
	p{
		font-size: rem(30);
		line-height: rem(40);
		color: $gray9;
	}
	button{
		display: block;
		width: 100%;
		margin-top: rem(50);
		height: rem(76);
		border-radius: rem(38);
		background-color: $mainColor;
		color: $white;
		font-size: rem(32);
	}
}
.rightBar {
	position: fixed;
	right: rem(20);
	bottom: 30%;
	z-index: 998;

	.goTop {
		width: rem(86);
		height: rem(86);
		border-radius: 50%;
		background-color: rgba(55,181,28,0.4);

		i {
			color: $white;
			font-size: rem(50);
			display: flex;
		}

		&:active {
			background-color: rgba(55,181,28,1);
		}
	}
}
